@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    @apply h-full;
  }

  body {
    @apply h-full;
  }

  #root {
    @apply h-full;
  }

  :root {
    --ansi-black: theme(ansi.colors.vscode.black);
    --ansi-red: theme(ansi.colors.vscode.red);
    --ansi-green: theme(ansi.colors.vscode.green);
    --ansi-yellow: theme(ansi.colors.vscode.yellow);
    --ansi-blue: theme(ansi.colors.vscode.blue);
    --ansi-magenta: theme(ansi.colors.vscode.magenta);
    --ansi-cyan: theme(ansi.colors.vscode.cyan);
    --ansi-white: theme(ansi.colors.vscode.white);
    --ansi-bright-black: theme(ansi.colors.vscode.bright-black);
    --ansi-bright-red: theme(ansi.colors.vscode.bright-red);
    --ansi-bright-green: theme(ansi.colors.vscode.bright-green);
    --ansi-bright-yellow: theme(ansi.colors.vscode.bright-yellow);
    --ansi-bright-blue: theme(ansi.colors.vscode.bright-blue);
    --ansi-bright-magenta: theme(ansi.colors.vscode.magenta);
    --ansi-bright-cyan: theme(ansi.colors.vscode.cyan);
    --ansi-bright-white: theme(ansi.colors.vscode.white);
  }

  .dark {
    --ansi-black: theme(ansi.colors.xtermjs.black);
    --ansi-red: theme(ansi.colors.xtermjs.red);
    --ansi-green: theme(ansi.colors.xtermjs.green);
    --ansi-yellow: theme(ansi.colors.xtermjs.yellow);
    --ansi-blue: theme(ansi.colors.xtermjs.blue);
    --ansi-magenta: theme(ansi.colors.xtermjs.magenta);
    --ansi-cyan: theme(ansi.colors.xtermjs.cyan);
    --ansi-white: theme(ansi.colors.xtermjs.white);
    --ansi-bright-black: theme(ansi.colors.xtermjs.bright-black);
    --ansi-bright-red: theme(ansi.colors.xtermjs.bright-red);
    --ansi-bright-green: theme(ansi.colors.xtermjs.bright-green);
    --ansi-bright-yellow: theme(ansi.colors.xtermjs.bright-yellow);
    --ansi-bright-blue: theme(ansi.colors.xtermjs.bright-blue);
    --ansi-bright-magenta: theme(ansi.colors.xtermjs.magenta);
    --ansi-bright-cyan: theme(ansi.colors.xtermjs.cyan);
    --ansi-bright-white: theme(ansi.colors.xtermjs.white);
  }
}

@layer components {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .rounded-tbody {
    @apply relative;
  }

  .rounded-table-wrapper {
    @apply ring-0 !important;
    @apply shadow-none !important;
    @apply inline-block;
  }

  .rounded-table-wrapper table {
    @apply border-separate border-spacing-0;
  }

  .rounded-thead tr:first-child th {
    @apply bg-chrome-50;
  }

  .rounded-thead tr:first-child th,
  .rounded-tbody tr:last-child td,
  .rounded-tbody td:first-child,
  .rounded-tbody td:last-child {
    @apply border-chrome-300;
  }

  .rounded-thead tr:first-child th {
    @apply border-t;
  }

  .rounded-tbody tr:last-child td {
    @apply border-b;
  }

  .rounded-thead th:first-child,
  .rounded-tbody td:first-child {
    @apply border-l;
  }

  .rounded-thead th:last-child,
  .rounded-tbody td:last-child {
    @apply border-r;
  }

  .rounded-thead tr:first-child th:first-child {
    @apply rounded-tl;
  }

  .rounded-thead tr:first-child th:last-child {
    @apply rounded-tr;
  }

  .rounded-tbody tr:last-child td:first-child {
    @apply rounded-bl;
  }

  .rounded-tbody tr:last-child td:last-child {
    @apply rounded-br;
  }
}
